<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 可以通过script标签引入Vue核心包 -->
    <script src="../vue.js"></script>
</head>

<body>
    <!-- <div id="app">作为模板文件,这是挂载的接口 -->
    <div id="app">
        <!-- {{}}代表的是插值语法,实际上是通过Vue.data.msg(Vue.msg)获得数据 -->
        <h1>{{msg}}</h1>
    </div>
    <script>
        //引入Vue.js后,会自动生成一个Vue的全局对象,是一个构造函数,参数是一个配置对象
        // console.log(Vue);


        //构造一个Vue实例,上面有各种api,我们可以操控实例对象控制页面和数据模型,在MVVM(一种软件设计的架构)中,属于VM(视图模型数据)
           console.log( new Vue());


        new Vue({
            //挂载配置,el的值可以为一个字符串(属性选择器),也可以是一个元素(element)
            el: '#app', // document.querySelector("app")
            //数据会设置在Vue._data中,同时在Vue上通过数据代理也保存有一份,可以通过Vue.data.msg或者Vue.msg获取到数据
            data:{
                msg: "挂载Vue1"
            }
        })


        /* //另一种挂载方法是
        const vm = new Vue({
           
            data:{
                msg:"挂载Vue2"
            }
        })
        //这是实例上的一种方法,可以进行挂载
        vm.$mount('#app') */


        //data是对象 可能在使用多个组件时被改写,所以我们一般写成函数使用
        new Vue({
            el:'#app',
            data(){
                return{
                    msg:'挂载Vue3'
                }
            }
        })

    </script>
</body>

</html>